import 'package:flutter/material.dart';
import 'package:flutter_mode/zyj/ui/webview.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
import 'package:url_launcher/link.dart';
import 'package:url_launcher/url_launcher.dart';

import '../utils.dart';

/// kiven 2021/8/23
class SyncfusionDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _SyncfusionDemoState();
  }
}

class _SyncfusionDemoState extends State<SyncfusionDemo> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('SyncfusionDemo'),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Wrap(
            spacing: 8,
            runSpacing: 4,
            children: [
              Text(
                'Syncfusion出了许多控件，这里不一定展示完。Syncfusion的控件使用，都需要Syncfusion的商业/免费许可。',
                style: TextStyle(color: Colors.grey),
              ),
              addTitle('SfCalendar'),
              addAction(
                  '简单使用',
                  () => _showLBottomWidget(SfCalendar(
                        view: CalendarView.month,
                        monthViewSettings: MonthViewSettings(showAgenda: true),
                      ))),
              addAction(
                  'workWeek',
                  () => _showLBottomWidget(SfCalendar(
                        view: CalendarView.workWeek,
                        timeSlotViewSettings: TimeSlotViewSettings(
                            startHour: 9,
                            endHour: 16,
                            nonWorkingDays: <int>[
                              DateTime.friday,
                              DateTime.saturday
                            ]),
                      ))),
              addAction(
                  'week',
                  () => _showLBottomWidget(SfCalendar(
                        view: CalendarView.week,
                        firstDayOfWeek: 4,
                      ))),
              addAction(
                  'DataSource',
                  () => _showLBottomWidget(SfCalendar(
                        view: CalendarView.month,
                        dataSource: MeetingDataSource(_getDataSource()),
                        monthViewSettings: MonthViewSettings(
                            appointmentDisplayMode:
                                MonthAppointmentDisplayMode.appointment),
                      ))),
              addTitle('datepicker'),
              addAction(
                  '简单',
                  () => _showLBottomWidget(SfDateRangePicker(
                        onSelectionChanged: (args) => print(args.value),
                      ))),
              addAction(
                  'view',
                  () => _showLBottomWidget(SfDateRangePicker(
                        view: DateRangePickerView.year,
                      ))),
              addAction(
                  'monthViewSettings',
                  () => _showLBottomWidget(SfDateRangePicker(
                        view: DateRangePickerView.month,
                        monthViewSettings:
                            DateRangePickerMonthViewSettings(firstDayOfWeek: 1),
                      ))),
              addAction(
                  'selectionMode',
                  () => _showLBottomWidget(SfDateRangePicker(
                        onSelectionChanged: (args) => print(args.value),
                        selectionMode: DateRangePickerSelectionMode.range,
                      ))),
              addTitle('SfCartesianChart'),
              addAction('空白', () => _showLBottomWidget(SfCartesianChart())),
              addAction(
                  '简单',
                  () => _showLBottomWidget(SfCartesianChart(
                          primaryXAxis: CategoryAxis(),
                          series: <LineSeries<SalesData, String>>[
                            LineSeries<SalesData, String>(
                                // Bind data source
                                dataSource: <SalesData>[
                                  SalesData('Jan', 35),
                                  SalesData('Feb', 28),
                                  SalesData('Mar', 34),
                                  SalesData('Apr', 32),
                                  SalesData('May', 40)
                                ],
                                xValueMapper: (SalesData sales, _) =>
                                    sales.year,
                                yValueMapper: (SalesData sales, _) =>
                                    sales.sales)
                          ]))),
              addTitle('SfSparkLineChart'),
              addAction(
                  '简单',
                  () => _showLBottomWidget(SfSparkLineChart(
                        trackball: SparkChartTrackball(
                            activationMode: SparkChartActivationMode.tap),
                        //Enable marker
                        marker: SparkChartMarker(
                            displayMode: SparkChartMarkerDisplayMode.all),
                        //Enable data label
                        labelDisplayMode: SparkChartLabelDisplayMode.all,
                        data: <double>[
                          1,
                          5,
                          -6,
                          0,
                          1,
                          -2,
                          7,
                          -7,
                          -4,
                          -10,
                          13,
                          -6,
                          7,
                          5,
                          11,
                          5,
                          3
                        ],
                      ))),
              addTitle(''),
              TextButton(
                  onPressed: () => launch(
                      'https://pub.flutter-io.cn/publishers/syncfusion.com/packages'),
                  child: Text('还有一些其他库，就不列举Demo了。点我查看更多>>'))
            ],
          ),
        ));
  }

  _showLBottomWidget(Widget view) async {
    final result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return BottomSheet(
              onClosing: () {},
              builder: (context) {
                return view;
              });
        });
  }

  addTitle(String title) {
    return Center(
      child: Text(title),
    );
  }

  addAction(String title, Function() action) {
    return ElevatedButton(
      onPressed: action,
      child: Text(title),
    );
  }

  List<Meeting> _getDataSource() {
    final List<Meeting> meetings = <Meeting>[];

    final DateTime today = DateTime.now();
    DateTime startTime = DateTime(today.year, today.month, today.day, 9, 0, 0);
    final DateTime endTime = startTime.add(const Duration(hours: 2));
    meetings.add(Meeting(
        'Conference', startTime, endTime, const Color(0xFF0F8644), false));

    final DateTime day2 = today.add(Duration(days: 3));
    startTime = DateTime(day2.year, day2.month, day2.day);
    meetings.add(Meeting('大宝生日', startTime, startTime.add(Duration(hours: 22)),
        const Color(0xFF6F5405), false));

    return meetings;
  }
}

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return appointments![index].from;
  }

  @override
  DateTime getEndTime(int index) {
    return appointments![index].to;
  }

  @override
  String getSubject(int index) {
    return appointments![index].eventName;
  }

  @override
  Color getColor(int index) {
    return appointments![index].background;
  }

  @override
  bool isAllDay(int index) {
    return appointments![index].isAllDay;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}

class SalesData {
  SalesData(this.year, this.sales);

  final String year;
  final double sales;
}
